<template>
  <div class="container">
    <div class="top">
      <div class="nav">
        <div class="nav-box">
          <div class="user">
            <img class="img" :src="user.avatar|imgPath" alt srcset>
            <div class="name">{{user.username}}</div>
          </div>
          <div class="extra">入党100天</div>
          <van-row type="flex" justify="space-around">
            <van-col span="6" v-for="item in navList1" :key="item.path">
              <template v-if="item.name==='学习强国'">
                <div @click="onOpenApp">
                  <img :src="item.imgurl">
                  <div class="nav-title">{{item.name}}</div>
                </div>
              </template>
              <router-link v-else :to="item.path">
                <img :src="item.imgurl" alt>
                <div class="nav-title">{{item.name}}</div>
              </router-link>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
    <div class="list">
      <van-cell is-link to="/my/info">
        <template slot="title">
          <img class="icon-img" src="../../assets/img/my/icon-gerenxinxi.png" alt srcset>
          <span class="custom-text">个人信息</span>
        </template>
      </van-cell>
      <van-cell is-link to="/my/message">
        <template slot="title">
          <img class="icon-img" src="../../assets/img/my/icon-xiaoxitongzhi.png" alt srcset>
          <span class="custom-text">消息通知</span>
        </template>
      </van-cell>
      <van-cell is-link to="/my/standing-book">
        <template slot="title">
          <img class="icon-img" src="../../assets/img/my/icon-standing.png" alt srcset>
          <span class="custom-text">学习台账</span>
        </template>
      </van-cell>
      <van-cell is-link to="/my/advise">
        <template slot="title">
          <img class="icon-img" src="../../assets/img/my/icon-advise.png" alt srcset>
          <span class="custom-text">我要反馈</span>
        </template>
      </van-cell>
      <!-- <van-cell is-link>
        <template slot="title">
          <img class="icon-img" src="../../assets/img/my/icon-setting.png" alt srcset>
          <span class="custom-text">系统设置</span>
        </template>
      </van-cell>-->
    </div>
    <div class="btn" @click="onLogout">退出账号</div>
  </div>
</template>

<script>
import { Dialog } from 'vant'

export default {
  data () {
    return {
      user: {},
      navList1: [
        {
          imgurl: require('@/assets/img/my/icon-shoucang.png'),
          name: '我的收藏',
          path: '/my/collect'
        },
        {
          imgurl: require('@/assets/img/my/icon-tongxunlu.png'),
          name: '通讯录',
          path: '/my/address-book'
        },
        {
          imgurl: require('@/assets/img/my/icon-wenjianxiazai.png'),
          name: '文件下载',
          path: '/my/download'
        },
        {
          imgurl: require('@/assets/img/my/icon-xuexijilu.png'),
          name: '学习记录',
          path: '/study-center/record/video'
        }
      ]
    }
  },
  created () {
    this.$store.commit('setCurrentBar', 3)
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      this.$axios.get('/xbkj-dj//web/getUserInfo').then(res => {
        this.user = res.data
      })
    },
    onLogout () {
      Dialog.confirm({
        title: '提示',
        message: '确认要退出账号？'
      }).then(() => {
        window.localStorage.removeItem('token')
        this.$router.push({
          name: 'login'
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.icon-img {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin-right: 5px;
}
.custom-text {
  vertical-align: middle;
}
.btn {
  color: #ff2c01;
  text-align: center;
  width: 160px;
  height: 40px;
  margin: 0 auto;
  margin-top: 40px;
}
.top {
  .extra {
    position: absolute;
    display: inline-block;
    right: 0;
    top: 10px;
    font-size: 12px;
    line-height: 1;
    padding: 10px;
    background-color: #fff1c5;
    border-radius: 4px;
  }
  .user {
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    .img {
      display: block;
      width: 56px;
      height: 56px;
      margin: 0 auto;
      border: 4px solid #fff;
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    }
    .name {
      font-weight: bold;
      line-height: 2;
    }
  }
}
.list {
  padding-top: 10px;
  background-color: #eee;
  /deep/ .van-cell {
    padding: 15px;
    &:not(:last-child)::after {
      border: none;
    }
  }
}

.nav {
  padding: 50px 0 20px 0;
}
.nav-box {
  position: relative;
  top: -20px;
  width: 90%;
  margin: 0 auto;
  padding: 80px 0 20px 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  text-align: center;
  border-radius: 8px;
}
.nav-box img {
  width: 25px;
  height: 25px;
}
.nav-box .nav-title {
  padding-bottom: 20px;
  font-size: 12px;
}
</style>
